import React, { useEffect, useState } from 'react'
import Home from '../../views/sandbox/home/Home'
import NoPermission from '../../views/sandbox/nopermission/NoPermission'
import RightList from '../../views/sandbox/right-manage/RightList'
import RoleList from '../../views/sandbox/right-manage/RoleList'
import UserList from '../../views/sandbox/user-manage/UserList'
import Draft from '../../views/sandbox/new-manage/Draft'
import Category from '../../views/sandbox/new-manage/Category'
import Audit from '../../views/sandbox/audit-manage/Audit'
import AuditList from '../../views/sandbox/audit-manage/AuditList'
import Unpublished from '../../views/sandbox/publish-manage/Unpublished'
import Published from '../../views/sandbox/publish-manage/Published'
import Sunset from '../../views/sandbox/publish-manage/Sunset'
import { Redirect, Route, Switch } from 'react-router-dom/cjs/react-router-dom.min'
import axios from 'axios'
import NewAdd from '../../views/sandbox/new-manage/NewAdd'
import NewPreview from '../../views/sandbox/new-manage/NewPreview'
import NewUpdate from '../../views/sandbox/new-manage/NewUpdate'
import { Spin } from 'antd'
import { connect } from 'react-redux'

const routeMap = {
  '/home': Home,
  '/user-manage/list': UserList,
  '/right-manage/role/list': RoleList,
  '/right-manage/right/list': RightList,
  '/news-manage/add': NewAdd,
  '/news-manage/draft': Draft,
  '/news-manage/category': Category,
  '/news-manage/preview/:id': NewPreview,
  '/news-manage/update/:id': NewUpdate,
  '/audit-manage/audit': Audit,
  '/audit-manage/list': AuditList,
  '/publish-manage/unpublished': Unpublished,
  '/publish-manage/published': Published,
  '/publish-manage/sunset': Sunset,
}
function NewsRouter(props) {
  const [routeList, setRouteList] = useState([])
  // 获取权限路由的数据
  useEffect(() => {
    Promise.all([axios.get('/rights'),
    axios.get('/children')
    ]).then(res => {
      // console.log([...res[0].data, ...res[1].data])
      setRouteList([...res[0].data, ...res[1].data])
    })
  }, [])

  const { role: { rights } } = JSON.parse(localStorage.getItem('token'))
  // 检查页面权限与本地是否存在该路由 
  const checkPermission = (item) => {
    // console.log(item)
    return (item.pagepermisson || item.routepermisson) && routeMap[item.key]
  }

  // 检查用户路由
  const checkUserPermissiom = (item) => {
    return rights.includes(item.key)
  }

  return (
    <Spin size="large" spinning={props.loading}>
      <Switch>
        {/* 遍历路由 */}
        {routeList.map(item => {
          if (checkPermission(item) && checkUserPermissiom(item)) {
            return <Route path={item.key} key={item.key} component={routeMap[item.key]} exact></Route>
          }
          return null
        }
        )}
        <Redirect from='/' to='/home' exact></Redirect>
        {/* 防止刚开始请求路由出现403现象 */}
        {routeList.length > 0 ? <Route path='*' component={NoPermission}></Route> : ''}
        
      </Switch>
    </Spin>
  )
}


const mapStateToProps = ({ isLoadingReceduer: { loading } }) => {
  // console.log(state)
  return {
    loading
  }
}

export default connect(mapStateToProps)(NewsRouter)